<script setup>
// import { supplierList, delSupplier, accountList } from "@/api/supplier.js";
import { feedbackList, feedbackDel } from "@/api/business.js"
import { getUsers } from "@/api/user.js";
import { onMounted, ref, computed } from "vue";
import confirm from "@/libs/confirm";
import { submitProject } from "@/api/project";
import { toast } from "@/hook/toast";
import { delay } from "@/utils";
import AddVue from "./add/index"

import { jiemaData } from '@/utils'


const projectlist = ref([]);
const loading = ref(true)
const addRef = ref(null)
const pagination = ref({
    page: 1,
    size: 15,
    total: 0
})
const isSearch = ref(false)

async function initData() {
    loading.value = true
    const { page } = pagination.value
    const params = { page, yewu_user: '' }
    if (isSearch.value) {
        const { yewu_user } = formData.value
        params.yewu_user = yewu_user
    }
    console.log(params)
    const resp = await feedbackList(params).catch(() => {
    });
    console.log(resp, '123')
    await delay(300)
    const { code, data, msg } = resp;
    if (code !== 1) {
        loading.value = false
        return toast({ title: msg, type: 'error' });
    }

    const { data: list, current_page, total, per_page } = data
    const aList = list.map((item, index) => ({
        ...item,
        index
    }))
    projectlist.value = aList;
    pagination.value = {
        total,
        size: per_page,
        page: current_page
    }
    loading.value = false
}

function pageChange(val) {
    pagination.value.page = val
    initData();
}

// 添加供应商
function addHandle() {
    visible.value = true
}
const visible = ref(false)

// 编辑供应商
function editSupplier(row) {
    visible.value = true
    addRef.value?.editHandle(row)
}


// 传值回来
function addSuccess() {
    resetForm()
}
function resetForm() {
    pagination.value.page = 1;
    projectlist.value = []
    initData()
    // formRef.value.resetFields()
}

onMounted(() => {
    initData();
    getPeopleList()
});

async function confirmProject(id) {
    const resp = await feedbackDel({ yichang_id: id })
    const { code, msg } = resp
    toast({ title: msg, type: code === 1 ? 'success' : 'error' })
    if (code !== 1) return
    pagination.value.page = 1
    await initData()
}

function confirmHandle(row) {
    const { fankui_name, id } = row
    confirm({
        title: '删除提醒',
        message: `您确定删除 ${fankui_name} 吗?`,
        confirmBtnText: '确认删除',
        cancelBtnText: '取消',
    }).then(() => confirmProject(id)).catch(() => {
    })
}

const heightValue = ref(600)
const contentRef = ref(null)
onMounted(() => {
    const target = contentRef.value
    if (!target) return
    const { height } = target.getBoundingClientRect()
    heightValue.value = height
})
const formRef = ref(null)
const formData = ref({
    keyword: '',
    status: '',
    yewu_user: ''

})
const statusOption = computed(() => [
    {
        label: '已结算',
        value: 1
    },
    {
        label: '未结算',
        value: 0,
    }
])

// 获取人员列表 
const peopleList = ref([])
async function getPeopleList() {
    const resp = await getUsers()
    const { code, data, msg } = resp
    if (code !== 1) return
    if (!!data && data.length) {
        peopleList.value = data.map(item => {
            const { id, nickname } = item
            return { value: id, label: nickname }
        })
    }
}

function searchHandle() {
    isSearch.value = true
    pagination.value.page = 1
    initData()
}

function resetHandle() {
    isSearch.value = false
    formData.value.yewu_user = ""
    formRef.value.resetFields()
    pagination.value.page = 1
    initData()
}
// 图片是否展示
const showViewer = ref(false)
// 图片
const contentPic = ref([])

// 当前第几行
const rowNumber = ref(0)
// 查看富文本 图片
function getpreview(e, i) {
    rowNumber.value = i
    if (e.target.nodeName === 'IMG' || e.target.nodeName == 'img') { //判断是否图片标签
        const img = e.target.currentSrc //获取点击图片地址
        console.log(img, '几张')
        contentPic.value = [img]
        onPreview()
    }
}
// 查看图片
function onPreview() {
    showViewer.value = true
}
// 关闭图片
function closeViewer() {
    showViewer.value = false;
};
function indexMethod(e) {
    console.log(e)
}

</script>
<template>
    <div class="card_wrap business-manage flex column">
        <el-row class="top_header">
            <el-form ref="formRef" :model="formData" inline>
                <el-form-item label="人员" prop="status">
                    <el-select v-model="formData.yewu_user">
                        <el-option v-for="(item, index) in peopleList" :key="index" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-space>
                        <!-- @click="searchHandle" -->
                        <!--  -->
                        <el-button @click="searchHandle" type="primary">搜索</el-button>
                        <el-button @click="resetHandle" type="danger">重置</el-button>
                    </el-space>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="addHandle">添加异常</el-button>
        </el-row>
        <div class="relative w-100 flex-1" style="margin-top: 24px;">
            <div class="absolute inset" ref="contentRef">
                <el-table :data="projectlist" style="width: 100%" :height="heightValue" border fit v-loading="loading">
                    <!-- <el-table-column fixed="left" type="index" /> -->
                    <el-table-column prop="yewu_name" label="名称" width="180" />
                    <el-table-column prop="date" label="反馈日期" width="180" />
                    <el-table-column prop="yichang_type_name" label="反馈类型" />
                    <el-table-column label="反馈内容" width="400" prop="content">
                        <template #default="{ row }">
                            <div class="content-img" v-html="jiemaData(row.content)" @click="getpreview($event, row.index)">
                            </div>
                            <el-image-viewer v-if="showViewer && row.index == rowNumber" :url-list="contentPic"
                                @close="closeViewer" :z-index="9999" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" :fixed="'right'">
                        <template #default="{ row }">
                            <el-space>
                                <el-button type="success" @click="editSupplier(row)" plain size="small">编辑</el-button>
                                <el-button type="danger" plain size="small" @click="confirmHandle(row)">删除</el-button>
                            </el-space>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="page w-100">
            <el-pagination layout="prev, pager, next" :total="pagination.total" class="mt-4" :page-size="pagination.size"
                :current_page="pagination.page" @current-change="pageChange" />
        </div>
        <div>
            <add-vue ref="addRef" v-model="visible" @add-success="addSuccess"></add-vue>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.el-table {

    & ::v-deep th.el-table__cell,
    ::v-deep td.el-table__cell {
        // 设置position 使得 子元素不与其产生新的层叠关系
        position: static;
    }
}

.business-manage {

    .page {
        display: flex;
        justify-content: flex-end;
        margin-top: 16px;
    }
}
</style>
